import 'package:aihu_getx_app/app/modules/commons/commons.dart';
import 'package:aihu_getx_app/app/modules/user_login/models/user_login_form_model.dart';
import 'package:aihu_getx_app/utils/constants.dart';
import 'package:aihu_getx_app/utils/custom_get_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:get/get.dart';

import '../controllers/user_login_controller.dart';

class UserLoginView extends GetView<UserLoginController> {
  UserLoginView({super.key});

  final _formKey = GlobalKey<FormBuilderState>();
  final _emailFieldKey = GlobalKey<FormFieldState<String>>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Commons.appBar(
        title: controller.title.value,
        subTitle: Commons.getCurrentClientConfig().title,
      ),
      body: SafeArea(
        minimum: const EdgeInsets.all(20),
        child: Center(
          child: FormBuilder(
            key: _formKey,
            autovalidateMode: AutovalidateMode.onUserInteraction,
            child: ListView(
              children: [
                Obx(
                  () => FormBuilderTextField(
                    key: _emailFieldKey,
                    name: 'mobile',
                    controller: controller.mobileController,
                    onChanged: (val) {
                      controller.mobile.value = val!;
                    },
                    style: Get.textTheme.bodyMedium,
                    decoration: InputDecoration(
                      labelText: '手机号',
                      prefixIcon: const Icon(Icons.phone_android),
                      hintText: '请输入手机号',
                      suffixIcon: Offstage(
                        offstage: controller.mobile.value == "",
                        child: IconButton(
                          onPressed: () {
                            controller.mobileController.clear();
                          },
                          icon: const Icon(Icons.clear),
                        ),
                      ),
                    ),
                    keyboardType: TextInputType.phone,
                    validator: FormBuilderValidators.compose([
                      FormBuilderValidators.required(errorText: "请输入手机号"),
                      FormBuilderValidators.compose([
                        (val) {
                          if (val == null) {
                            return null;
                          }
                          if (!GetUtils.isPhoneNumber(val)) {
                            return '请输入正确的手机号';
                          }
                          return null;
                        }
                      ]),
                    ]),
                  ),
                ),
                const SizedBox(height: 10),
                Obx(
                  () => FormBuilderTextField(
                    name: 'password',
                    controller: controller.passwordController,
                    onChanged: (val) {
                      controller.password.value = val!;
                    },
                    style: Get.textTheme.bodyMedium,
                    onSubmitted: (val) {
                      bool? validate = _formKey.currentState?.validate();
                      if (validate == null || !validate) {
                        return;
                      }
                      controller.login(UserLoginFormModel.fromJson(
                          _formKey.currentState!.instantValue));
                    },
                    decoration: InputDecoration(
                      labelText: '密码',
                      hintText: '请输入密码',
                      prefixIcon: const Icon(Icons.lock),
                      suffixIcon: IconButton(
                        onPressed: () {
                          controller.showPassword.value =
                              !controller.showPassword.value;
                        },
                        icon: Icon(
                          controller.showPassword.value
                              ? Icons.visibility
                              : Icons.visibility_off,
                        ),
                      ),
                    ),
                    obscureText: !controller.showPassword.value,
                    validator: FormBuilderValidators.compose(
                      [
                        FormBuilderValidators.required(errorText: "请输入密码"),
                        FormBuilderValidators.minLength(
                          4,
                          errorText: "密码太短了哦",
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () {
                    bool? validate = _formKey.currentState?.validate();
                    if (validate == null || !validate) {
                      return;
                    }
                    controller.login(UserLoginFormModel.fromJson(
                        _formKey.currentState!.instantValue));
                  },
                  child: const Text('登录'),
                ),
                const SizedBox(height: 10),
                const Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('温馨提示：没有账号将自动为您注册'),
                    // TextButton(
                    //   onPressed: () {
                    //     Get.offNamed(Routes.eRegister);
                    //   },
                    //   child: const Text('去注册'),
                    // ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextButton(
                      onPressed: () {
                        CustomGetUtil.snackbar(
                          "温馨提示",
                          "暂不支持重置密码，请联系管理员处理~",
                        );
                      },
                      child: const Text('忘记密码？'),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextButton(
                      onPressed: () {
                        Get.offAllNamed(
                          Commons.getCurrentClientConfig().indexPage,
                          arguments: {
                            Constants.pageIndexArgument: 0,
                          },
                        );
                      },
                      child: const Text('回首页'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
